<script lang="ts" setup>
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { IconPath, PageTitle } from '@/common/constants'
import { searchService } from '@/common/service/search'
import { useHistoryStore } from '@/common/store'
import type { Activity } from '@/common/types/activity'
import type { Projects } from '@/common/types/projects'
import type { User } from '@/common/types/user'

const { searchHistory, addSearchHistory, clearSearchHistory } = useHistoryStore()

const { contentAreaHeight } = useLayoutInfo()

const searchText = ref(searchHistory)

// 公益活动
const projects = ref<Projects[]>([])
// 志愿者活动
const activity = ref<Activity[]>([])
// 用户
const users = ref<User[]>([])

/** 搜索内容 */
const queryText = ref('')

/** 搜索类型 */
type searchType = 'projects' | 'activity' | 'users'

/** 搜索类型 */
const type = ref<searchType>('projects')

/** 是否已搜索 */
const isSearch = ref<boolean>(false)

/** 搜索事件 */
const onSearch = async (q?: string) => {
  const text = queryText.value ? queryText.value : q

  if (!text?.trim())
    return

  addSearchHistory(text)

  const index = searchText.value.indexOf(text)

  if (index !== -1) {
    searchText.value.splice(index, 1)
  }

  searchText.value = [text, ...searchText.value.filter(item => item !== text)]

  // 搜索数据
  const data = await searchService(type.value, text)

  switch (type.value) {
    case 'projects':
      console.log('projects')

      projects.value = data.data as unknown as Projects[]
      break
    case 'activity':
      console.log('activity')
      activity.value = data.data as unknown as Activity[]
      break
    case 'users':
      console.log('users')
      users.value = data.data as unknown as User[]
      break
  }
  console.log(projects.value)

  isSearch.value = true
}

/** 修改类型 */
const onChangeType = (t: searchType) => {
  console.log('onChangeType')

  type.value = t
  onSearch()
}

/** 清空 */
const onClear = () => {
  uni.showModal({
    title: '温馨提示',
    content: '您确认要清空历史记录吗?',
    success(result) {
      if (result.confirm) {
        clearSearchHistory()
        searchText.value = []
      }
    },
  })
}

onLoad((options) => {
  if (!options)
    return
  if (!options.q || !options.type)
    return
  queryText.value = options.q
  type.value = options.type

  onSearch()
})
</script>

<template>
  <hope-nav-bar is-home-icon :title="PageTitle.SEARCH" />

  <scroll-view
    scroll-y class="search-scroll" :style="{
      height: `${contentAreaHeight}px`,
    }"
  >
    <view class="search-container">
      <hope-search-bar class="search-bar" type="search" @on-search="onSearch" />
      <view v-if="!isSearch" class="search-options">
        <hope-search-text type="history" :text="searchText" />

        <view class="clear" @click="onClear">
          <image class="clear-icon" :src="IconPath.CLEAR_LIGHT" mode="scaleToFill" />
          <text class="clear-text">
            清空历史
          </text>
        </view>
      </view>

      <view v-else class="search-content">
        <view class="search-content-list">
          <text :class="[{ active: type === 'projects' }]" @click="() => onChangeType('projects')">
            公益项目
          </text>
          <text class="search-content-list-line">
            |
          </text>
          <text :class="[{ active: type === 'activity' }]" @click="() => onChangeType('activity')">
            志愿者活动
          </text>
          <text class="search-content-list-line">
            |
          </text>
          <text :class="[{ active: type === 'users' }]" @click="() => onChangeType('users')">
            用户
          </text>
        </view>
        <!-- 公益活动 -->
        <view v-if="type === 'projects'">
          <template v-if="projects.length > 0">
            <template v-for="project in projects" :key="project.id">
              <hope-projects :project="project" />
            </template>
          </template>
          <view v-else class="no-data">
            暂无关于 {{ queryText }} 的公益项目
          </view>
        </view>
        <!-- 志愿者活动 -->
        <view v-else-if="type === 'activity'">
          <template v-if="activity.length > 0">
            <view v-for="item in activity" :key="item.id" class="activity">
              <hope-activity :activity="item" />
            </view>
          </template>
          <view v-else class="no-data">
            暂无关于 {{ queryText }} 的志愿者活动
          </view>
        </view>
        <!-- 用户 -->
        <template v-else-if="type === 'users'">
          <template v-if="users.length > 0">
            <view v-for="user in users" :key="user.avatarUrl" class="search-tab-user-list">
              <hope-user-card :avatar-url="user.avatarUrl" :nickname="user.nickname" />
            </view>
          </template>

          <view v-else class="no-data">
            暂无名字叫 {{ queryText }} 的用户
          </view>
        </template>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.no-data {
  text-align: center;
  color:$uni-text-color-grey;
  padding-block: $padding-base;
}
.search {
  &-scroll {
    background-color: $color-white;

  }

  &-container {
    height: 100%;
    padding-inline: $padding-base;
    padding-top: $padding-base;

    /* padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); */

    .clear {
      position: absolute;
      right: 0;
      top: 50%;
      display: flex;
      align-items: center;
      width: 250rpx;
      height: 250rpx;
      background: url('https://hope-mp.oss-cn-guangzhou.aliyuncs.com/icon/ic_irregularity_bg.svg');
      background-repeat: no-repeat;
      background-size: cover;
      padding-left: 30rpx;

      transform: translate(42%, -50%);

      &-text {
        writing-mode: vertical-lr
      }

      &-icon {
        width: 60rpx;
        height: 60rpx;

      }

      &-text {
        color: $color-white;
      }

    }
  }

  &-content {
    background-color: $color-white;

    &-list {
      text-align: center;
      padding: 20rpx;

      text {
        color: #bababa;
        font-size: 26rpx;
      }

      &-line {
        margin: 0 20rpx;
        color: #f3f3f3;
      }

      .active {
        color: red;
      }
    }

    &-user-list {
      padding-top: 10%;
      display: flex;
      width: 100%;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 50rpx;
    }
  }
}

.activity {
  height: 300rpx;
  margin-bottom: 30rpx;
}
</style>
